<template>
    <div>
        <Tabs :datas="keys" v-model="selected" @change="change"></Tabs>
        <div>
            <textarea v-model="text" style="width: 900px;height: 300px;resize: none">

            </textarea>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sourceView",
        props:{
            source:{
                type:Object
            }
        },
        data(){
            return {
               selected:""
            }
        },
        mounted() {
            if(this.source){
               let keys= Object.keys(this.source);
               if(keys.length>0){
                   this.selected=keys[0];
               }
            }
        },
        computed:{
          keys(){
              return Object.keys(this.source)
          },
          text(){
            return this.source[this.selected];
         }
        },
        methods:{
            change(){

            }
        }
    }
</script>

<style scoped>

</style>
